This is ready, I've updated OP and cleaned up the PR comments.

move diff stats to right and change them from sum of changes to +/-

Why the change is better?

It's following GitHub's current design:

I think it's much more useful to see +/- instead of the current sum.

GitLab also has the +/- design, but they only show numbers:

Maybe later I will also implement this "5 boxes" design, but not in this PR.

The template on pull request tabs bar now also uses templates/repo/diff/stats.tmpl. Appearance is unchanged, tooltip is added (although I find this tooltip mostly unnecessary now).

One more enhancement, remove box-shadow hack.

Before: Ugly ":target" border:

After: Clean border:

I couldn't notice the "borders being visible behind top corners" problem, so likely this hack was obsolete anyways.

These problems should have been fixed in the new commit.

And the font pollution conflicts caused by patches (font family, size) are also fixed.

That change is from your fix of " Fix all rounded borders, change affected tab menus to pills #30707 "

The box shadow hack was only for a problem only visible when the header was sticky, it shouldn't have any affect for non-sticky content.

That change is from your fix of " Fix all rounded borders, change affected tab menus to pills #30707 "

The box shadow hack was only for a problem only visible when the header was sticky, it shouldn't have any affect for non-sticky content.

If you'd like to remove it, I am also fine. It doesn't really bother me. Simpler is better.

The last problem in my mind: Executable vs executable.

The problems:

• LFS
• generated
• Executable or executable
• changed mode: Executable -> Regular or executable -> regular

Personally I prefer to use Executable -> Regular and change generated to Generated

also see the screenshot in #36215 (comment)

Yeah I think we can consistently capitalize these tags.

Fixed more layout problems:

I found some new things: there are some webkit-specfic styles:

.diff-file-header .file-link {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

I am not sure it really works well for various cases, or it works for other browsers. It seems not easy to change these styles at the moment.

Not bad on firefox:

Details

Anyway, let's merge and try and do more improvements in the future (if necessary)

-webkit-box is a special text rendering mode supported in all browsers. It's to ensure at maximum 2 lines of text are rendered. No browser currently implements the standard line-clamp as of today.

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/line-clamp